<template>
  <div class="cloudplay">
    <!-- 云玩热榜 -->
    <div class="clouds_play_hot_list">
      <h3 class="biaoti">云玩热榜</h3>
      <!-- 云玩列表 -->
      <div class="cloudslist" v-for="item in state.cloudplay" :key="item.id">
        <!-- 图 -->
        <div class="cloudslist_img">
          <van-image width="60" height="60" :src="item.url" />
        </div>
        <!-- 中间内容 -->
        <div class="c_middle">
          <h3>{{ item.title }}</h3>
          <div class="cm_middle">
            <van-image
              width="13"
              height="15"
              :src="require('../../../../public/img/我的游戏/小星星.png')"
            />
            <!-- 评分 -->
            <span>{{ item.score }}</span>
            <!-- 标签 -->
            <p>
              <span v-for="(item1, index) in item.small" :key="index"
                >{{ item1 }}-</span
              >
            </p>
          </div>
        </div>
        <!-- 右边按钮 -->
        <van-button round type="primary" size="mini" class="yunwan"
          >云玩</van-button
        >
      </div>
    </div>
  </div>
  <div class="footer1"></div>
</template>

<script>
// import {} from "vue";
import { reactive } from "vue";
import axios from "axios";
export default {
  setup() {
    const state = reactive({
      cloudplay: [],
    });
    axios
      .get("http://121.199.14.205:3000/api/list", {
        params: {
          pageSize: 7,
          currentPage: 1,
        },
      })
      .then(function (response) {
        state.cloudplay = response.data.list;
      });
    return {
      state,
    };
  },
};
</script>

<style lang="less" scoped>
.footer1 {
  height: 45px;
}
.cloudplay {
  padding: 0 15px;
  // 云玩热榜
  .clouds_play_hot_list {
    font-size: 16px;
    .biaoti {
      padding: 10px 0;
    }
    // 云玩列表
    .cloudslist {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      // 中间内容
      h3 {
        font-size: 18px;
      }
      .c_middle {
        padding-left: 20px;
        flex: 1;
        margin: auto;
        .cm_middle {
          display: flex;
          align-items: center;
          span {
            font-size: 12px;
            font-weight: 600;
            color: #12c4ce;
            margin-left: 2px;
          }
          p {
            display: inline-block;
            margin-left: 10px;
            font-weight: 600;
            color: #868b91;
            width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 36px;
            span {
              color: #ccc;
            }
          }
        }
      }
      .yunwan {
        padding: 0 15px;
        color: #14c4cc;
        background: #ebf9fa;
        font-weight: 600;
        border: none;
      }
    }
  }
}
</style>
